<template>
  <div class="content">
    <div class="top b_color">
      <div class="logo">
        <el-image style="width: 100%" :src="url" fit="contain" />
      </div>
      <div class="nav">
        <div
          class="item"
          v-for="(item, index) in json.nav_list"
          :key="index"
          @click="onNavhandle(item.label)"
        >
          <div>
            <el-image
              style="width: 36px; height: 36px"
              :src="item.icon"
            ></el-image>
          </div>
          <div>{{ item.name }}</div>
          <div class="option" v-if="xiaoxi && item.label == 'xiaoxi'">
            <div class="option_item flex-row justify-between">
              <div class="text">服务提醒</div>
              <!-- <div class="label">1</div> -->
            </div>
            <div class="option_item flex-row justify-between">
              <div class="text">货流通知</div>
              <!-- <div class="label">1</div> -->
            </div>
            <router-link to="/onlineorder" class="option_item flex-row justify-between">
              <div class="text">网络订单</div>
              <div class="label">{{untOrderCount}}</div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- <div class="user">客服</div> -->
    </div>
    <div class="main" @click="table">
      <el-table
        :data="json.tableData"
        height="100%"
        border
        stripe
        highlight-current-row
        style="width: 100%; text-align: center"
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="null" label="口" width="40" />
        <el-table-column prop="date" label="促销" width="60" />
        <el-table-column prop="name" label="商品条码" width="220" />
        <el-table-column prop="address" label="商品名称" />
        <el-table-column prop="price" label="单价" width="100" />
        <el-table-column prop="nums" label="数量" width="100" />
        <el-table-column prop="amount" label="小计" width="100" />
      </el-table>
    </div>

    <div class="dialog" :class="{ show: show }">
      <Hexiao @onClose="callback" />
    </div>
    <!-- 订单提示 -->
    <div class="notice" v-show="OrderStatus">
      <div class="h2">订单提醒</div>
      <div class="msg"><el-icon class="icon" size="18"><InfoFilled /></el-icon>有
        <span style="color:rgb(237, 37, 37);">{{untOrderCount}}</span>
        个网络订单未处理!</div>
      <div class="button flex-row justify-between">
        <el-button type="success" @click="router.push('/onlineorder')">立即处理</el-button>
        <el-button @click="closeNotice()">稍后</el-button>
      </div>
    </div>
  </div>
  <el-affix class="bottom_box" position="bottom" :offset="0">
      <div class="buttom">
        <div class="b_box1">
          <p>共 0 件</p>
          <div>
            <el-button>取单</el-button>
            <el-button>+ 新增商品</el-button>
            <el-button class="null">删除</el-button>
          </div>
        </div>
        <div class="b_box2">
          <div class="box_1">
            <div class="input">
              <el-input
                v-model="barcode"
                style="width: 100%; height: 40px"
                placeholder="条码/拼音码/品名"
              />
            </div>
            <div class="input">
              <el-input
                v-model="proprice"
                style="width: 100%; height: 40px"
                placeholder="输入价格无码收银"
              />
            </div>
          </div>
          <div class="box_1">
            <div class="input">
              <el-input
                v-model="user"
                style="width: 100%; height: 40px; box-shadow: none"
                placeholder="会员/手机号"
              />
            </div>
            <div class="user">
              <div class="item">
                <div>来宾</div>
                <div class="item_b">
                  <div class="name">姓名</div>
                  <el-button>查看</el-button>
                </div>
              </div>
              <div class="item">
                <div>0</div>
                <div class="item_b">
                  <div class="name">余额</div>
                  <el-button>充值</el-button>
                </div>
              </div>
              <div class="item">
                <div>0</div>
                <div class="item_b">
                  <div class="name">积分</div>
                  <el-button>兑换</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="box_1">
            <div class="right_item">
              <p class="text">收 款</p>
              <div class="hint">[空格键]</div>
            </div>
            <div class="right_item price">￥0.0</div>
          </div>
        </div>
      </div>
  </el-affix>
</template>

<script setup>
import Hexiao from "@/components/order/hexiao.vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import json from "@/assets/js/json.js";
import http from "@/api/index.js"
let url = ref("./src/assets/images/logo.png");

// 输入框
let barcode = ref(); //条码
let proprice = ref(); //无码收银
let user = ref(); //会员
const router = useRouter();


const callback = (Obj) => {
  show.value = Obj.show;
};

const centerDialogVisible = ref(false); //弹出框
const currentRow = ref();
const show = ref(false);
const xiaoxi = ref(false)
const untOrderCount = ref(0) //未处理订单数
const OrderStatus = ref(false) 
const delaytime = ref(1000*60)

//顶部导航事件
const onNavhandle = (label) => {
  centerDialogVisible.value = true;
  switch(label){
    case 'hexiao':{
      show.value = true;
      break;
    }
    case 'xiaoxi':{
      xiaoxi.value = !xiaoxi.value
      break;
    }
  }
};
const handleCurrentChange = (val) => {
  currentRow.value = val;
  // console.log(val)
};

// 获取未处理订单数量
const getCount = async ()=>{
  var result = await http.untorder();

  if(result.data.status){
    OrderStatus.value = true
    untOrderCount.value = result.data.data
  }
  return false
}
// 点击表格
const table = ()=>{
  xiaoxi.value = false
}
// 关闭订单提醒
const closeNotice = ()=>{
  OrderStatus.value = false;
}
onMounted(()=>{
  getCount();
  setInterval(()=>{
    getCount()
  },delaytime.value);
})
</script>
<style scoped>
@import "@/assets/css/common.css";
@import "@/assets/css/home.css";
</style>
